import { FormItemEnum } from "@/components/CustomForm/utils/enums";

import ReportPage from "@/components/ReportPage/index";
import { CTableColumnProps } from "@/components/ReportPage/index.model";
import { UserService } from "@/core/apis/user/index.service";
import { Button, Space } from "@arco-design/web-react";
import { useEffect } from "react";

export default function Report() {
  const tableColumns: CTableColumnProps[] = [
    {
      title: "姓名",
      dataIndex: "name",
      search: {
        el: FormItemEnum.INPUT,
        initialValue: "666",
      },
      width: 300,
      fixed: "left",
    },
    {
      title: "年龄",
      width: 300,
      dataIndex: "age",
      search: {
        el: FormItemEnum.INPUT,
      },
    },
    {
      title: "手机",
      dataIndex: "phone",
      width: 300,
    },
    {
      title: "地址",
      width: 300,
      dataIndex: "address",
    },
    {
      title: "性别",
      dataIndex: "sex",
    },
  ];

  const onSelectChange = (selectedRowKeys, selectedRows) => {
    console.log(selectedRows);
  };
  useEffect(() => {
    UserService.getList().then((res) => {
      console.log(res);
    });
  }, []);
  return (
    <div className="h-full w-full">
      <ReportPage
        data={[{ name: "Alice", id: 1, key: 555 }]}
        tableProps={{
          columns: tableColumns,
          selectChange: onSelectChange,
        }}
        operationButtons={
          <Space>
            <Button type="primary" size="small">
              新增
            </Button>
            <Button type="primary" status="danger" size="small">
              删除
            </Button>
          </Space>
        }
      />
    </div>
  );
}
